<template>
  <div>
    <el-form
      :model="formPTLiat"
      class="demo-form-inline"
      label-position="right"
      label-width="136px"
      ><el-row>
        <el-col :span="24"
          ><el-form-item label="P&L" prop="businessLine">
            <el-radio-group
              v-model="formPTLiat.businessLine"
              @change="businessLineChange($event)"
              fill="#3A62D7"
              style="margin-bottom: 30px"
            >
              <el-radio-button label="ALL">ALL</el-radio-button>
              <el-radio-button label="APPS-AUTO">APPS-AUTO</el-radio-button>
              <el-radio-button label="APPS-CPRD-MNC"
                >APPS-CPRD MNC</el-radio-button
              >
              <el-radio-button label="APPS-MLS">APPS-MLS</el-radio-button>
              <el-radio-button label="APPS-CPRD Local"
                >APPS-CPRD LOCAL</el-radio-button
              >
              <el-radio-button label="APPS-OTHERS">APPS-OTHERS</el-radio-button>
              <el-radio-button label="INVENT">INVENT</el-radio-button>
            </el-radio-group></el-form-item
          ></el-col
        >
      </el-row>
      <el-row :gutter="10" v-if="!isShow">
        <el-col :span="8">
          <el-form-item label="sub P&L" prop="serviceLine">
            <el-select
              v-model="formPTLiat.serviceLine"
              style="width: 100%"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in busServiceLineOption"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Account" prop="account">
            <el-select
              v-model="formPTLiat.account"
              style="width: 100%"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in accountOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Domain" prop="domain">
            <el-input
              v-model="formPTLiat.domain"
              placeholder="请输入"
              clearable
            />
            <!-- <el-select
              v-model="formPTLiat.domain"
              style="width: 100%"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in contractTypeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select> -->
          </el-form-item></el-col
        >
      </el-row>
      <el-row :gutter="10" v-if="!isShow">
        <el-col :span="8"
          ><el-form-item label="Client's Name">
            <el-input
              v-model="formPTLiat.clientsName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Project Name">
            <el-input
              v-model="formPTLiat.projectName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Project Code">
            <el-input
              v-model="formPTLiat.projectCode"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="10" v-if="!isShow">
        <el-col :span="8"
          ><el-form-item label="DE">
            <el-input
              v-model="formPTLiat.deName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="EM">
            <el-input
              v-model="formPTLiat.emName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="CSM">
            <el-input
              v-model="formPTLiat.csmName"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="10" v-if="!isShow">
        <el-col :span="8"
          ><el-form-item label="Project Type" prop="ProjectType">
            <el-select
              v-model="formPTLiat.projectType"
              style="width: 100%"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in projectTypeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Thor ID">
            <el-input
              v-model="formPTLiat.thorId"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="Contract Type" prop="contractType">
            <el-select
              v-model="formPTLiat.contractType"
              style="width: 100%"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in contractTypeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              /> </el-select></el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8" v-if="!isShow"
          ><el-form-item label="Pursuit Leader">
            <el-input
              v-model="formPTLiat.pursuitLeader"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="8" v-if="!isShow"
          ><el-form-item label="Solution Owner">
            <el-input
              v-model="formPTLiat.solutionOwner"
              placeholder="请输入"
              clearable /></el-form-item
        ></el-col>
        <el-col :span="isShow ? 24 : 8">
          <div class="isShow">
            <el-link @click="more" type="primary" :underline="false"
              >{{ isShow ? '展开' : '收起' }}
              <el-icon v-if="isShow"><ArrowDown /></el-icon>
              <el-icon v-else><ArrowUp /></el-icon>
            </el-link>
          </div> </el-col
      ></el-row>
      <el-row :gutter="30">
        <el-col :span="8"></el-col>
        <el-col :span="8"></el-col>
        <el-col :span="8">
          <el-form-item class="btn-right">
            <el-button color="#3A62D7" type="primary" @click="hadleSearch()">
              查 询
            </el-button>
            <el-button @click="handleReset()"> 重 置 </el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="Main Report" name="MainReport">
        <div>
          <el-button
            color="#3A62D7"
            @click="handleExport(false)"
            :disabled='!checkedData.length>0'
            style="height: 28px"
            type="primary"
            >导出</el-button
          >
          <el-button
            color="#3A62D7"
            @click="handleExport(true)"
            style="height: 28px"
            type="primary"
            >全部导出</el-button
          >
        </div>
        <el-table
          :data="MainReportTableData"
          width="100%"
          border
          scrollbar-always-on
          @selection-change="handleSelectionChange"
          :header-cell-style="{
            background: '#EFEFEF',
            color: '#101010',
            height: '48px',
            fontSize: '13px',
            border: '1px solid #fff'
          }"
          :cell-style="{ height: '26px', fontSize: '12px', padding: '5px 0' }"
        >
          <el-table-column type="selection" label="Choose All" width="48" />
          <el-table-column
            :show-overflow-tooltip="true"
            fixed
            type="index"
            label="No."
            width="70"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            fixed
            label="General Info"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              prop="version"
              label="Version"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="projectCode"
              label="Project Code"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="clientsName"
              label="Client's Name"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="projectName"
              label="Project Name"
              width="120"
            />
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="General Info">
            <el-table-column
              :show-overflow-tooltip="true"
              prop="account"
              label="Account"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="domain"
              label="Domain"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="thorId"
              label="Thor ID"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="contractType"
              label="Contract Type"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="refFrameContractThorId"
              label="Ref Frame Contract Thor ID"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="externalClientOrInterCompany"
              label="External Client or Intercomoany"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="businessLine"
              label="Business Line"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="serviceLine"
              label="Service Line"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="projectType"
              label="Project Type"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="deName"
              label="DE"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="emName"
              label="EM"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="csmName"
              label="CSM"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="rdcCategory"
              label="RDC Category"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="pursuitLeader"
              label="Pursuit Leader"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="amName"
              label="AM"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="skillSetSpoc"
              label="SkillSet SPOC"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="deliveryNature"
              label="Delivery Nature"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="competencyTeam"
              label="Competency Team"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="businessDomain"
              label="Business Domain"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="solution"
              label="Solution"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="solutionOwner"
              label="Solution Owner"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="startDate"
              label="Start Date"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="estimatedProjectLength"
              label="Estimated Project Length(Month)"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="estimatedEndDate"
              label="Estimated End Date"
              width="120"
            />
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="Cost Data">
            <el-table-column
              :show-overflow-tooltip="true"
              prop="ownResource"
              label="Own Resource"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="groupResource"
              label="Group Resource"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="external"
              label="External"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="totalCost"
              label="Total Cost"
              width="120"
            />
            <!-- <el-table-column :show-overflow-tooltip='true' prop="POC%" label="POC%" width="120" /> -->
            <el-table-column :show-overflow-tooltip="true" label="NBT">
              <el-table-column
                :show-overflow-tooltip="true"
                prop="nbtMandays"
                label="mandays"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="nbtCost"
                label="cost"
                width="120"
              />
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="CSM">
              <el-table-column
                :show-overflow-tooltip="true"
                prop="csmMandays"
                label="mandays"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="csmCost"
                label="cost"
                width="120"
              />
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="DE">
              <el-table-column
                :show-overflow-tooltip="true"
                prop="deMandays"
                label="mandays"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="deCost"
                label="cost"
                width="120"
              />
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="EM">
              <el-table-column
                :show-overflow-tooltip="true"
                prop="emMandays"
                label="mandays"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="emCost"
                label="cost"
                width="120"
              />
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="Archi1">
              <el-table-column
                :show-overflow-tooltip="true"
                prop="archiOneMandays"
                label="mandays"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="archiOneCost"
                label="cost"
                width="120"
              />
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="Archi2">
              <el-table-column
                :show-overflow-tooltip="true"
                prop="archiTwoMandays"
                label="mandays"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="archiTwoCost"
                label="cost"
                width="120"
              />
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="Archi3">
              <el-table-column
                :show-overflow-tooltip="true"
                prop="archiThreeMandays"
                label="mandays"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="archiThreeCost"
                label="cost"
                width="120"
              />
            </el-table-column>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="MAN DAYS AND CHARGE OUT RATE"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              label="Total days required"
            >
              <!-- /////////////////// -->
              <el-table-column
                :show-overflow-tooltip="true"
                prop="totalChinaResources"
                label="CG China Resources"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="totalGroupResources"
                label="Group Resources"
                width="120"
              />
              <!-- /////////////////// -->
              <el-table-column
                :show-overflow-tooltip="true"
                prop="totalExtenalContractors"
                label="Extenal Contractors"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="totalTotalDaysCor"
                label="Total DAYS&COR"
                width="120"
              />
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="Actual Avg.Charge-out(/day)"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                prop="actualChinaResources"
                label="CG China Resources"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="actualGroupResources"
                label="Group Resources"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="actualExtenalContractors"
                label="Extenal Contractors"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="actualTotalDaysCor"
                label="Total DAYS&COR"
                width="120"
              />
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="Standard Avg.Charge-out(/day)"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                prop="standardChinaResources"
                label="CG China Resources"
                width="120"
              />
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="Own Resource Discount considering buffer(%)"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                prop="ownChinaResources"
                label="CG China Resources"
                width="120"
              />
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="Actual Avg.Charge-out(/day) not use risk buffer"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                prop="actualNotChinaResources"
                label="CG China Resources"
                width="120"
              />
            </el-table-column>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="KEY PERFORMANCE INDICATORS"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              prop="ownResourceUrve"
              label="Own Resource URVE(%)"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="executiveInvolvement"
              label="Executive Involvement(%) of Own Resource Total Time"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="purchaseResourceRevenve"
              label="Purchase Resource revenue/Total Revenue"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="rdcProportion"
              label="RDC Proportion of Own Resources"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="expense"
              label="Expense of Total Revenue"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="nonBillableLaborCost"
              label="NonBillable Labor Cost of Total Revenue"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="subcon"
              label="Subcon of Total Revenue"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="interestRate"
              label="Interest Rate"
              width="120"
            />
            <!-- <el-table-column :show-overflow-tooltip='true'
              prop="RDC Enhancement%"
              label="RDC Enhancement%"
              width="120"
            /> -->
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="Financial Data">
            <el-table-column
              :show-overflow-tooltip="true"
              prop="clientPrice"
              label="Client Price(excl.Vat&&Add.tax)"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="serviceRevenue"
              label="Project Revenue-Service Revenue"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="swHwRevenue"
              label="Project Revenue-SW/HW Revenue"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="totalProjectRevenue"
              label="Total Project Revenue(excl.VAT)"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="ownResourceDiscount"
              label="Own Resource Discount(%)"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              label="Delivery risk buffer"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                prop="deliveryRiskBufferRmb"
                label="RMB"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="deliveryRiskBuffer"
                label="risk buffer%"
                width="120"
              />
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="HW/SW risk buffer"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                prop="hwSwRiskBufferRmb"
                label="RMB"
                width="120"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="hwSwRiskBuffer"
                label="risk buffer%"
                width="120"
              />
            </el-table-column>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="Cash Flow">
            <el-table-column
              :show-overflow-tooltip="true"
              prop="paymentTerm"
              label="Payback term"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="paybackMonth"
              label="Payback month"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="paybackPeriod"
              label="Payback period"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="maxCashExposure"
              label="Max cash exposure"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="monthOfMaxCashExposure"
              label="Month of max cash exposure"
              width="120"
            />
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="Project blended"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              prop="blendedTotal"
              label="Blended total CM%"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="blendedRdc"
              label="Blended RDC CM%"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="blendedNonRdc"
              label="Blended NOn RDC CM%"
              width="120"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="Blended ADRC/COR"
              label="Blended ADRC/COR"
              width="120"
            />
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100, 200]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="Cost Detail" name="CostDetail">
        <el-table
          :data="MainReportTableData"
          width="100%"
          max-height="416"
          border
          scrollbar-always-on
          :default-expand-all="true"
          :header-cell-style="{
            background: '#EFEFEF',
            color: '#101010',
            height: '48px',
            fontSize: '13px',
            border: '1px solid #fff'
          }"
          :cell-style="{ height: '26px', fontSize: '12px', padding: '5px 0' }"
        >
          <el-table-column :show-overflow-tooltip="true" type="expand">
            <template #default="scope">
              <el-table
                :data="scope.row.costDetailList"
                :header-cell-style="{
                  background: '#B7B7B7',
                  color: '#000',
                  height: '38px',
                  fontSize: '11px',
                  border: '1px solid #fff',
                  padding: '0px'
                }"
                :cell-style="{
                  height: '26px',
                  fontSize: '12px',
                  padding: '1px 0'
                }"
                border
              >
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="role"
                  label="Role"
                  width="100"
                  ><template #default="scope1">
                    <span
                      v-if="scope1.row.role === 'Summary'"
                      style="font-weight: 700; color: #000; font-size: 13px"
                      >{{ scope1.row.role }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  :show-overflow-tooltip="true"
                  v-for="(item, index) in scope.row.dataDetailList"
                  :key="index"
                  :label="item.detailDate"
                >
                  <el-table-column :show-overflow-tooltip="true" label="manday">
                    <template #default="scope1">
                      <span
                        :style="
                          scope1.row.role === 'Summary'
                            ? {
                                fontWeight: '700',
                                color: '#000',
                                fontSize: '13px'
                              }
                            : ''
                        "
                        >{{
                          scope1.row.role === 'CSM'
                            ? item.detailCsmManday
                            : scope1.row.role === 'DE'
                            ? item.detailDeManday
                            : scope1.row.role === 'EM'
                            ? item.detailEmManday
                            : scope1.row.role === 'Archi1'
                            ? item.detailArchiOneManday
                            : scope1.row.role === 'Archi2'
                            ? item.detailArchiTwoManday
                            : scope1.row.role === 'Archi3'
                            ? item.detailArchiThreeManday
                            : item.detailSummaryManday
                        }}</span
                      >
                    </template></el-table-column
                  >
                  <el-table-column :show-overflow-tooltip="true" label="cost"
                    ><template #default="scope1">
                      <span
                        :style="
                          scope1.row.role === 'Summary'
                            ? {
                                fontWeight: '700',
                                color: '#000',
                                fontSize: '13px'
                              }
                            : ''
                        "
                        >{{
                          scope1.row.role === 'CSM'
                            ? item.detailCsmCost
                            : scope1.row.role === 'DE'
                            ? item.detailDeCost
                            : scope1.row.role === 'EM'
                            ? item.detailEmCost
                            : scope1.row.role === 'Archi1'
                            ? item.detailArchiOneCost
                            : scope1.row.role === 'Archi2'
                            ? item.detailArchiTwoCost
                            : scope1.row.role === 'Archi3'
                            ? item.detailArchiThreeCost
                            : item.detailSummaryCost
                        }}</span
                      >
                    </template></el-table-column
                  >
                </el-table-column>
                <!-- <el-table-column
                  :show-overflow-tooltip="true"
                  v-for="(item, index) in tableHeaderDate"
                  :key="index"
                  :label="item.date"
                >
                  <el-table-column
                    :show-overflow-tooltip="true"
                    :label="item.manday"
                  >
                    <template #default="scope">
                      <span>{{ scope.row.data[index].manday }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    :show-overflow-tooltip="true"
                    :label="item.cost"
                    ><template #default="scope">
                      <span>{{ scope.row.data[index].cost }}</span>
                    </template></el-table-column
                  >
                </el-table-column> -->
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="projectCode"
            label="Project Code"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="clientsName"
            label="Client's Name"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="projectName"
            label="Project Name"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="thorId"
            label="Thor ID"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="contractType"
            label="Contract Type"
          />
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100, 200]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="Profitability Detail" name="ProfitabilityDetail"
        ><el-table
          :data="MainReportTableData"
          width="100%"
          max-height="416"
          border
          scrollbar-always-on
          :default-expand-all="true"
          :header-cell-style="{
            background: '#EFEFEF',
            color: '#101010',
            height: '48px',
            fontSize: '13px',
            border: '1px solid #fff'
          }"
          :cell-style="{ height: '26px', fontSize: '12px', padding: '5px 0' }"
        >
          <el-table-column :show-overflow-tooltip="true" type="expand">
            <template #default="scope">
              <el-table
                :data="scope.row.profitabilityData"
                :show-overflow-tooltip="true"
                :header-cell-style="{
                  background: '#B7B7B7',
                  color: '#000',
                  height: '38px',
                  fontSize: '11px',
                  border: '1px solid #fff',
                  padding: '0px'
                }"
                :cell-style="{
                  height: '26px',
                  fontSize: '12px',
                  padding: '1px 0'
                }"
                border
              >
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="projectPro"
                  label="PROJECT PRO"
                >
                  <template #default="scope1">
                    <span
                      v-if="
                        scope1.row.projectPro === 'Total Revenues' ||
                        scope1.row.projectPro === 'Total direct cost' ||
                        scope1.row.projectPro === 'Contribution Margin'
                      "
                      style="font-weight: 700; color: #000; font-size: 13px"
                      >{{ scope1.row.projectPro }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  :show-overflow-tooltip="true"
                  width="160"
                  prop="chinaResource"
                  label="CG China Resources"
                  ><template #default="scope1">
                    <span
                      v-if="
                        scope1.row.projectPro === 'Total Revenues' ||
                        scope1.row.projectPro === 'Total direct cost' ||
                        scope1.row.projectPro === 'Contribution Margin'
                      "
                      style="font-weight: 700; color: #000; font-size: 13px"
                      >{{ scope1.row.chinaResource }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="groupResource"
                  label="Group Resources (Incl.Praxis)"
                  ><template #default="scope1">
                    <span
                      v-if="
                        scope1.row.projectPro === 'Total Revenues' ||
                        scope1.row.projectPro === 'Total direct cost' ||
                        scope1.row.projectPro === 'Contribution Margin'
                      "
                      style="font-weight: 700; color: #000; font-size: 13px"
                      >{{ scope1.row.groupResource }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  width="160"
                  :show-overflow-tooltip="true"
                  prop="externalContractors"
                  label="External Contractors"
                  ><template #default="scope1">
                    <span
                      v-if="
                        scope1.row.projectPro === 'Total Revenues' ||
                        scope1.row.projectPro === 'Total direct cost' ||
                        scope1.row.projectPro === 'Contribution Margin'
                      "
                      style="font-weight: 700; color: #000; font-size: 13px"
                      >{{ scope1.row.externalContractors }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="teExpenses"
                  label="TE expenses(incl.Quick Estimates)"
                  ><template #default="scope1">
                    <span
                      v-if="
                        scope1.row.projectPro === 'Total Revenues' ||
                        scope1.row.projectPro === 'Total direct cost' ||
                        scope1.row.projectPro === 'Contribution Margin'
                      "
                      style="font-weight: 700; color: #000; font-size: 13px"
                      >{{ scope1.row.teExpenses }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="hwSw"
                  label="HW SW"
                  ><template #default="scope1">
                    <span
                      v-if="
                        scope1.row.projectPro === 'Total Revenues' ||
                        scope1.row.projectPro === 'Total direct cost' ||
                        scope1.row.projectPro === 'Contribution Margin'
                      "
                      style="font-weight: 700; color: #000; font-size: 13px"
                      >{{ scope1.row.hwSw }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="risk"
                  label="Risk"
                  ><template #default="scope1">
                    <span
                      v-if="
                        scope1.row.projectPro === 'Total Revenues' ||
                        scope1.row.projectPro === 'Total direct cost' ||
                        scope1.row.projectPro === 'Contribution Margin'
                      "
                      style="font-weight: 700; color: #000; font-size: 13px"
                      >{{ scope1.row.risk }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column
                  :show-overflow-tooltip="true"
                  prop="total"
                  label="Total"
                  ><template #default="scope1">
                    <span
                      v-if="
                        scope1.row.projectPro === 'Total Revenues' ||
                        scope1.row.projectPro === 'Total direct cost' ||
                        scope1.row.projectPro === 'Contribution Margin'
                      "
                      style="font-weight: 700; color: #000; font-size: 13px"
                      >{{ scope1.row.total }}</span
                    >
                  </template></el-table-column
                >
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="projectCode"
            label="Project Code"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="clientsName"
            label="Client's Name"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="projectName"
            label="Project Name"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="thorId"
            label="Thor ID"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="contractType"
            label="Contract Type"
          />
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100, 200]"
            small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { mainRepdortList, exportExcel } from '@/api/report'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import QS from 'qs'


const activeName = ref('MainReport')
let currentPage = ref(1)
let pageSize = ref(10)
let serviceLineOptions = [
  { value: 'APPS-AUTO-DAIMLER-plus', label: 'APPS-AUTO-DAIMLER-plus' },
  { value: 'APPS-AUTO-BMW-plus', label: 'APPS-AUTO-BMW-plus' },
  { value: 'APPS-AUTO-FR-n-Tier1', label: 'APPS-AUTO-FR-n-Tier1' },
  { value: 'APPS-AUTO-VWG-plus-Non CAP', label: 'APPS-AUTO-VWG-plus-Non CAP' },
  {
    value: 'APPS-AUTO-VWG-plus-CAP CARIAD',
    label: 'APPS-AUTO-VWG-plus-CAP CARIAD'
  },
  { value: 'APPS-AUTO-East China-East', label: 'APPS-AUTO-East China-East' },
  {
    value: 'APPS-AUTO-East China-Geely&Volvo',
    label: 'APPS-AUTO-East China-Geely&Volvo'
  },
  { value: 'APPS-AUTO-GROWTH-C&I', label: 'APPS-AUTO-GROWTH-C&I' },
  { value: 'APPS-AUTO-GROWTH-OTH', label: 'APPS-AUTO-GROWTH-OTH' },
  { value: 'APPS-AUTO-JBS', label: 'APPS-AUTO-JBS' },
  { value: 'APPS-CPRD-MNC-CP&R-CP', label: 'APPS-CPRD-MNC-CP&R-CP' },
  { value: 'APPS-CPRD-MNC-CP&R-L&C', label: 'APPS-CPRD-MNC-CP&R-L&C' },
  { value: 'APPS-CPRD-MNC-CP&R-QSR', label: 'APPS-CPRD-MNC-CP&R-QSR' },
  { value: 'APPS-CPRD-MNC-R&F', label: 'APPS-CPRD-MNC-R&F' },
  { value: 'APPS-MLS-TMT-n-MFG-Non CAP', label: 'APPS-MLS-TMT-n-MFG-Non CAP' },
  {
    value: 'APPS-MLS-TMT-n-MFG-CAP SAP China',
    label: 'APPS-MLS-TMT-n-MFG-CAP SAP China'
  },
  { value: 'APPS-MLS-LS', label: 'APPS-MLS-LS' },
  { value: 'APPS-MLS-FS-Non CAP', label: 'APPS-MLS-FS-Non CAP' },
  { value: 'APPS-MLS-FS-CAP HSBC', label: 'APPS-MLS-FS-CAP HSBC' },
  { value: 'APPS-CPRD-Local-BSM', label: 'APPS-CPRD-Local-BSM' },
  { value: 'APPS-CPRD-Local-CPRD', label: 'APPS-CPRD-Local-CPRD' },
  { value: 'APPS-CPRD-Local-OTH', label: 'APPS-CPRD-Local-OTH' },
  { value: 'APPS-OTHERS', label: 'APPS-OTHERS' },
  { value: 'INVENT', label: 'INVENT' }
]
let accountOptions = [
  { value: 'BMW', label: 'BMW' },
  { value: 'GreatWall', label: 'GreatWall' },
  { value: 'Daimler', label: 'Daimler' },
  { value: 'Michelin', label: 'Michelin' },
  { value: 'BOSCH', label: 'BOSCH' },
  { value: 'Faurecia', label: 'Faurecia' },
  { value: 'Goodyear', label: 'Goodyear' },
  { value: 'Stellantis', label: 'Stellantis' },
  { value: 'Total Account', label: 'Total Account' },
  { value: 'vw', label: 'vw' },
  { value: 'CARIAD', label: 'CARIAD' },
  { value: 'JSS', label: 'JSS' },
  { value: 'HSBC', label: 'HSBC' },
  { value: 'Didi', label: 'Didi' },
  { value: 'FAW&DF&ChangAn', label: 'FAW&DF&ChangAn' },
  { value: 'SFDC German', label: 'SFDC German' },
  { value: 'Geely-Volvo', label: 'Geely-Volvo' },
  { value: 'SAIC', label: 'SAIC' },
  { value: 'JLR', label: 'JLR' },
  { value: 'Ford', label: 'Ford' },
  { value: 'AB Volvo', label: 'AB Volvo' },
  { value: 'Chery', label: 'Chery' },
  { value: 'Sandvik', label: 'Sandvik' },
  { value: 'JBS', label: 'JBS' },
  { value: 'FOSUN FFT', label: 'FOSUN FFT' },
  { value: 'GAC', label: 'GAC' },
  { value: 'LINDE', label: 'LINDE' },
  { value: 'Foton', label: 'Foton' },
  { value: 'SAP China', label: 'SAP China' },
  { value: 'TE Connectivity', label: 'TE Connectivity' },
  { value: 'Huawei', label: 'Huawei' },
  { value: 'Nokia', label: 'Nokia' },
  { value: 'Wuxi', label: 'Wuxi' },
  { value: 'Sanofi', label: 'Sanofi' },
  { value: 'SCB', label: 'SCB' },
  { value: 'BI', label: 'BI' },
  { value: 'GSK', label: 'GSK' },
  { value: 'Bayer', label: 'Bayer' },
  { value: 'Fosun', label: 'Fosun' },
  { value: 'Fresenius', label: 'Fresenius' },
  { value: 'ProBio', label: 'ProBio' },
  { value: 'Gilead', label: 'Gilead' },
  { value: 'Infineon', label: 'Infineon' },
  { value: 'Schlumberger', label: 'Schlumberger' },
  { value: 'Schneider', label: 'Schneider' },
  { value: 'CRC', label: 'CRC' },
  { value: 'Yili', label: 'Yili' },
  { value: 'Tsingtao Beer', label: 'Tsingtao Beer' },
  { value: 'Bailian', label: 'Bailian' },
  { value: 'Capitaland', label: 'Capitaland' },
  { value: 'GLP', label: 'GLP' },
  { value: 'JoyCity', label: 'JoyCity' },
  { value: 'Wangfujing', label: 'Wangfujing' },
  { value: 'UBR', label: 'UBR' },
  { value: 'EDUCATION', label: 'EDUCATION' },
  { value: 'Burberry', label: 'Burberry' },
  { value: 'H&M', label: 'H&M' },
  { value: 'IKEA', label: 'IKEA' },
  { value: "McDonald's", label: "McDonald's" },
  { value: 'LDC', label: 'LDC' },
  { value: 'LVMH', label: 'LVMH' },
  { value: 'P&G', label: 'P&G' },
  { value: "L'oreal", label: "L'oreal" },
  { value: 'Unilever', label: 'Unilever' },
  { value: 'Richemont', label: 'Richemont' },
  { value: 'Starbucks', label: 'Starbucks' },
  { value: 'YUM', label: 'YUM' },
  { value: 'Other Accounts', label: 'Other Accounts' }
]

let contractTypeOptions = [
  { value: 'Frame Contract', label: 'Frame Contract' },
  { value: 'Contract', label: 'Contract' },
  { value: 'PO', label: 'PO' }
]

let projectTypeOptions = [
  { value: 'T and M', label: 'T and M' },
  { value: 'Fixed Price', label: 'Fixed Price' },
  { value: 'Fixed Monthly Fee', label: 'Fixed Monthly Fee' },
  { value: 'T and M with Cap', label: 'T and M with Cap' },
  { value: 'Performance Based/Shared', label: 'Performance Based/Shared' }
]

const total = ref(0)
let formPTLiat = ref({
  account: '',
  businessLine: 'ALL',
  clientPrice: '',
  clientsName: '',
  contractType: '',
  createdBy: '',
  creationDate: '',
  csmName: '',
  deName: '',
  emName: '',
  estimatedEndDate: '',
  estimatedProjectLength: '',
  lastUpdateDate: '',
  lastUpdatedBy: '',
  pageNo: 1,
  pageSize: 10,
  projectCode: '',
  projectName: '',
  projectType: '',
  serviceLine: '',
  startDate: '',
  thorId: '',
  version: '',
  dataList: []
})
let busServiceLineOption = ref([])

let checkedData = ref([])

const handleSelectionChange = (val) => {
  checkedData.value = val
  console.log('--------', checkedData.value)
}

const hadleSearch = async () => {
  console.log(formPTLiat)
  await getMainRepdortList()
}
const handleReset = async () => {
  formPTLiat.value = {
    account: '',
    businessLine: 'ALL',
    clientPrice: '',
    clientsName: '',
    contractType: '',
    createdBy: '',
    creationDate: '',
    csmName: '',
    deName: '',
    emName: '',
    estimatedEndDate: '',
    estimatedProjectLength: '',
    lastUpdateDate: '',
    lastUpdatedBy: '',
    pageNo: 1,
    pageSize: 10,
    projectCode: '',
    projectName: '',
    projectType: '',
    serviceLine: '',
    startDate: '',
    thorId: '',
    version: '',
    dataList: []
  }
  await getMainRepdortList()
}
const handleClick = (tab, event) => {
  // console.log(tab, event)
}
const businessLineChange = async (e) => {
  // console.log(e);
  if (e !== 'ALL') {
    console.log('bussinessline：', e)
    busServiceLineOption.value = []
    serviceLineOptions.forEach((item, index) => {
      if (item.value.includes(e)) {
        busServiceLineOption.value.push(item)
      }
    })
  } else {
    busServiceLineOption.value = serviceLineOptions
  }
  formPTLiat.value.businessLine = e
  await getMainRepdortList()
}
const isShow = ref(true)

const more = () => {
  isShow.value = !isShow.value
}
// const profitabilityData = ref([])
const clickit = (scope) => {
  console.log(scope)
}
const MainReportTableData = ref([])
onMounted(async () => {
  await getMainRepdortList()
  busServiceLineOption.value = serviceLineOptions
})

let allIds = ref('')
const getMainRepdortList = async () => {
  const res = await mainRepdortList(formPTLiat.value)
  MainReportTableData.value = res.data.data.records
  total.value = res.data.data.total
  allIds.value = res.data.data.records.map((item) => item.generalId)

  console.log('------allIds', allIds.value)
  res.data.data.records.forEach((item, index) => {
    MainReportTableData.value[index].profitabilityData = []
    MainReportTableData.value[index].costDetailList = []
    MainReportTableData.value[index].profitabilityData.push({
      projectPro: 'Resource Revenues',
      chinaResource: item.chinaResourceRevenues,
      groupResource: item.groupResourceRevenues,
      externalContractors: item.externalResourceRevenues,
      teExpenses: item.teExpensesResourceRevenues,
      hwSw: item.hwSwResourceRevenues,
      risk: item.riskResourceRevenues,
      total: item.totalResourceRevenues
    })
    MainReportTableData.value[index].profitabilityData.push({
      projectPro: 'Withholding tax',
      chinaResource: item.chinaWithholdingTax,
      groupResource: item.groupWithholdingTax,
      externalContractors: item.externalWithholdingTax,
      teExpenses: item.teExpensesWithholdingTax,
      hwSw: item.hwSwWithholdingTax,
      risk: item.riskWithholdingTax,
      total: item.totalWithholdingTax
    })
    MainReportTableData.value[index].profitabilityData.push({
      projectPro: 'Risk contingency',
      chinaResource: item.chinaRiskContingency,
      groupResource: item.groupRiskContingency,
      externalContractors: item.externalRiskContingency,
      teExpenses: item.teExpensesRiskContingency,
      hwSw: item.hwSwRiskContingency,
      risk: item.riskRiskContingency,
      total: item.totalRiskContingency
    })
    MainReportTableData.value[index].profitabilityData.push({
      projectPro: 'Total Revenues',
      chinaResource: item.chinaTotalRevenues,
      groupResource: item.groupTotalRevenues,
      externalContractors: item.externalTotalRevenues,
      teExpenses: item.teExpensesTotalRevenues,
      hwSw: item.hwSwTotalRevenues,
      risk: item.riskTotalRevenues,
      total: item.totalTotalRevenues
    })
    MainReportTableData.value[index].profitabilityData.push({
      projectPro: 'Cost of Resources',
      chinaResource: item.chinaCostOfResources,
      groupResource: item.groupCostOfResources,
      externalContractors: item.externalCostOfResources,
      teExpenses: item.teExpensesCostOfResources,
      hwSw: item.hwSwCostOfResources,
      risk: item.riskCostOfResources,
      total: item.totalCostOfResources
    })
    MainReportTableData.value[index].profitabilityData.push({
      projectPro: 'Withholding tax',
      chinaResource: item.chinaWithholdingTaxTwo,
      groupResource: item.groupWithholdingTaxTwo,
      externalContractors: item.externalWithholdingTaxTwo,
      teExpenses: item.teExpensesWithholdingTaxTwo,
      hwSw: item.hwSwWithholdingTaxTwo,
      risk: item.riskWithholdingTaxTwo,
      total: item.totalWithholdingTaxTwo
    })
    MainReportTableData.value[index].profitabilityData.push({
      projectPro: 'Risk contingency',
      chinaResource: item.chinaRiskContingencyTwo,
      groupResource: item.groupRiskContingencyTwo,
      externalContractors: item.externalRiskContingencyTwo,
      teExpenses: item.teExpensesRiskContingencyTwo,
      hwSw: item.hwSwRiskContingencyTwo,
      risk: item.riskRiskContingencyTwo,
      total: item.totalRiskContingencyTwo
    })
    MainReportTableData.value[index].profitabilityData.push({
      projectPro: 'Total direct cost',
      chinaResource: item.chinaTotalDirectCost,
      groupResource: item.groupTotalDirectCost,
      externalContractors: item.externalTotalDirectCost,
      teExpenses: item.teExpensesTotalDirectCost,
      hwSw: item.hwSwTotalDirectCost,
      risk: item.riskTotalDirectCost,
      total: item.totalTotalDirectCost
    })
    MainReportTableData.value[index].profitabilityData.push({
      projectPro: 'Contribution Margin',
      chinaResource: item.chinaContributionMargin,
      groupResource: item.groupContributionMargin,
      externalContractors: item.externalContributionMargin,
      teExpenses: item.teExpensesContributionMargin,
      hwSw: item.hwSwContributionMargin,
      risk: item.riskContributionMargin,
      total: item.totalContributionMargin
    })
    // item.dataDetailList.forEach((month, i) => {
    MainReportTableData.value[index].costDetailList.push({
      role: 'CSM'
    })
    MainReportTableData.value[index].costDetailList.push({
      role: 'DE'
    })
    MainReportTableData.value[index].costDetailList.push({
      role: 'EM'
    })
    MainReportTableData.value[index].costDetailList.push({
      role: 'Archi1'
    })
    MainReportTableData.value[index].costDetailList.push({
      role: 'Archi2'
    })
    MainReportTableData.value[index].costDetailList.push({
      role: 'Archi3'
    })
    MainReportTableData.value[index].costDetailList.push({
      role: 'Summary'
    })
    // })
  })
  console.log('MainReportTableData', MainReportTableData.value)
}

const handleExport = async (e) => {
  if (e) {
    console.log('全部导出');
    // console.log(QS.stringify({ids: allIds.value},{arrayFormat: 'repeat'}));
    const res = await exportExcel(QS.stringify({ids: allIds.value},{arrayFormat: 'repeat'}))
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', 'Report.xlsx') // 设置下载文件的文件名
    document.body.appendChild(link)
    link.click()
  } else {
    console.log('部分导出');
    const res = await exportExcel(QS.stringify({ids: checkedData.value.map(item => item.generalId)},{arrayFormat: 'repeat'}))
    const url = window.URL.createObjectURL(new Blob([res.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', 'Report.xlsx') // 设置下载文件的文件名
    document.body.appendChild(link)
    link.click()
  }
}

const handleSizeChange = (val) => {
  pageSize.value = val
  formPTLiat.pageSize = val
  getMainRepdortList()
  console.log(`${val} 条每页`)
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  formPTLiat.pageNo = val
  getMainRepdortList()
  console.log(`页码: ${val}`)
}
// const getSummaries = (param) => {
//   const { columns, data } = param
//   const sums = ['summary']
//   const arr = []
//   // console.log(columns, data)
//   data.forEach((item, index) => {
//     item.data.forEach((innerItem, innerIndex) => {
//       // console.log(innerIndex + 1 + ':', innerItem.manday, innerItem.cost)
//       arr.push(innerItem.manday, innerItem.cost)
//     })
//   })
//   // console.log(arr)
//   arr.forEach((item, index) => {
//     if (index <= arr.length - 7) {
//       // console.log('11-------',sums[index/data.length]);
//       sums.push(Number(arr[index]) + Number(arr[index + 6]))
//     } else {
//       return
//     }
//   })
//   return sums
// }

const CostDetailTableData = [
  {
    ProjectCode: '0001',
    ClientName: '0001',
    ProjectName: '0001',
    ThorID: '0001',
    ContractType: '0001',
    table: [
      {
        role: 'CSM',
        data: [
          {
            date: '2023-09',
            manday: '100',
            cost: '30'
          },
          {
            date: '2023-10',
            manday: '30',
            cost: '100'
          },
          {
            date: '2023-11',
            manday: '90',
            cost: '100'
          }
        ]
      },
      {
        role: 'ACC',
        data: [
          {
            date: '2023-09',
            manday: '100',
            cost: '30'
          },
          {
            date: '2023-10',
            manday: '30',
            cost: '100'
          },
          {
            date: '2023-11',
            manday: '90',
            cost: '100'
          }
        ]
      }
      // {
      //   role: 'DE',
      //   data: [
      //     {
      //       date: '2023-09',
      //       manday: '70',
      //       cost: '10'
      //     },
      //     {
      //       date: '2023-10',
      //       manday: '10',
      //       cost: '30'
      //     },
      //     {
      //       date: '2023-11',
      //       manday: '80',
      //       cost: '70'
      //     }
      //   ]
      // }
    ]
  },
  {
    ProjectCode: '0002',
    ClientName: '0002',
    ProjectName: '0002',
    ThorID: '0002',
    ContractType: '0002',
    table: [
      {
        role: 'DE',
        data: [
          {
            date: '2023-09',
            manday: '100',
            cost: '200'
          },
          {
            date: '2023-10',
            manday: '50',
            cost: '200'
          },
          {
            date: '2023-11',
            manday: '50',
            cost: '10'
          }
        ]
      },
      {
        role: 'scop',
        data: [
          {
            date: '2023-09',
            manday: '100',
            cost: '200'
          },
          {
            date: '2023-10',
            manday: '20',
            cost: '10'
          },
          {
            date: '2023-11',
            manday: '130',
            cost: '30'
          }
        ]
      }
    ]
  }
]

const tableHeaderDate = [
  { date: '2023-09', manday: 'manday', cost: 'cost' },
  { date: '2023-10', manday: 'manday', cost: 'cost' },
  { date: '2023-11', manday: 'manday', cost: 'cost' }
]
</script>

<style scoped lang="scss">
.el-table {
  margin-top: 20px;
}
.btn-right {
  float: right;
  margin-top: 10px;
  .el-button {
    height: 28px;
    padding: 0 20px;
  }
}
::v-deep .demo-form-inline {
  font-weight: 700;
}
::v-deep .el-form-item__label {
  color: #101010;
}
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.isShow {
  float: right;
  margin-top: 6px;
}
.el-radio-button {
  margin: 0 10px;
}
::v-deep .el-radio-button__inner {
  border: none;
  overflow: hidden;
  border-radius: 5px;
}
::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 5px;
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  border: none;
  border-radius: 5px;
}
::v-deep .el-radio-group {
  margin-bottom: 4px !important;
}
</style>

<style lang="scss">
.el-table__expanded-cell {
  padding: 0 20px 20px 20px !important;
}
</style>
